import React,{Component,PropTypes} from 'react';
import {redirect,backward} from 'lib/utils';
import OssUpload from "components/OssUpload";
import Baselist from 'components/Baselist';
import Crumb from 'components/Crumb'
import banner from 'images/banner.png';

import {Card,Form, Select, Input, InputNumber, Icon, Table, Modal, Button} from 'antd';
import './style.less';

const FormItem = Form.Item;
const Option = Select.Option;


const columns = [{
    title: 'id',
    dataIndex: 'id',
    render: text => <a href="#">{text}</a>,
}, {
    title: '商品名称',
    dataIndex: 'name',
}];

const data = [
    {
        key: '1',
        id: 224,
        name: "商品二",
    }, {
        key: '2',
        id: 225,
        name: "商品二",
    }, {
        key: '3',
        id: 226,
        name: "商品三",
    }, {
        key: '4',
        id: 227,
        name:"商品四",
    }
];


class AddThematic extends Component{
    constructor(props){
        super(props);

        this.state={
            hasImg:true ,       // 有图片
            visible: false,
            goodsList:[],
            crumb:[
                {href:"/",title:"首页"},
                {href:"/",title:"活动列表"},
                {href:"/",title:"添加活动"}
            ]
        }
    };


    componentDidMount(){
        const {id} = this.props.routeParams;

        if(id){
            // API.fetch("",{id:id},resp=>{
                const initData={
                    title:"年底大促活动",
                    intro:"双十一延续,年底促销活动",
                    state:"put",
                    img:banner,
                    date:"2017-10-25 4:10:11"
                };

                this.props.form.setFieldsValue(initData);


                this.setState({
                    img:initData.img,
                    hasImg:true,
                    goodsList:data
                });
            // })
        }
    };

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }else {
                //  必传图片的错误信息提示,是否显示
                if(err.img){
                    this.setState({hasImg:false})
                }else{
                    this.setState({hasImg:true})
                }
            }
        });
    };

    handlerPic(field){
        this.props.form.setFieldsValue({
            img: field
        });

        // ++ 图片上传操作后,对错误信息提示的处理
        let hasImg = false
        field?hasImg = true:null

        this.setState({
            img:field,
            hasImg:hasImg
        })
    }

    showModal = () => {
        this.setState({
            visible: true,
        });
    }
    handleOk = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }
    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }



    render(){
        const { getFieldDecorator } = this.props.form;
        const {hasImg,goodsList} = this.state;


        /*       商品选购         */
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    goodsList:selectedRows
                })
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
            }),
        };


        return(
            <Baselist>
                <Crumb crumb={this.state.crumb}/>
                <Card title="活动信息" noHovering={true}>
                    <Form onSubmit={this.handleSubmit} className="snap-up_wrap">
                        <FormItem label="活动标题" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }}>
                            {getFieldDecorator('title', {
                                rules: [{ required: true, message: '请输入活动标题' }],
                            })(
                                <Input placeholder="请输入活动标题"/>
                            )}
                        </FormItem>



                        <FormItem label="活动简介" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }}>
                            {getFieldDecorator('intro', {
                                rules: [{ required: true, message: '请输入活动简介' }],
                            })(
                                <Input placeholder="请输入活动简介"/>
                            )}
                        </FormItem>



                        <FormItem label="活动状态" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }}>
                            {getFieldDecorator('state', {
                                rules: [{ required: false, message: '' }],
                            })(
                                <Select onChange={this.handleSelectChange} >
                                    <Option value="put">上架</Option>
                                    <Option value="pull">下架</Option>
                                </Select>
                            )}
                        </FormItem>



                        <FormItem style={{marginBottom:6}}>
                            {getFieldDecorator('img', {
                                rules: [{ required: true, message: ' ' }],
                            })(
                                <OssUpload default={this.state.img}
                                           onFieldSet={this.handlerPic.bind(this)}
                                           multiple={false}
                                           lable="封面图"
                                />
                            )}
                        </FormItem>
                        {/*  原有图片上传的必填提示信息,位置不好修改所以另起一行做提示  */}
                        <div className="ant-row ant-form-item oss-upload_elem" style={{visibility:hasImg?"hidden":"visible"}}>
                            <label className="ant-form-item-label ant-col-xs-24 ant-col-sm-4">  </label>
                            <div className="ant-col-8 ant-form-item-control-wrapper" style={{color: "#f04134"}}>请选择图片</div>
                        </div>




                        <FormItem label="添加商品" labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
                            {getFieldDecorator('level', {
                                rules: [{ required: false, message: '' }],
                            })(
                                <div className="add-op" onClick={this.showModal}>
                                    <Icon type="plus" />
                                    点击添加商品
                                </div>
                            )}
                        </FormItem>



                        <FormItem >
                            <div className="ant-col-4 ant-form-item-label"></div>
                            <div className="ant-col-16 ant-form-item-control-wrapper">
                                {
                                    goodsList.length>0?
                                        <div className="thead tr">
                                            <span className="tr-items">id</span>
                                            <span className="tr-items">商品名称</span>
                                        </div>
                                    :null
                                }

                                <div className="tbody">
                                    {
                                        goodsList.map(v=>(
                                            <div className="tr" key={v.key}>
                                                <span className="tr-items">{v.id}</span>
                                                <span className="tr-items">{v.name}</span>
                                            </div>
                                        ))
                                    }

                                </div>
                            </div>

                        </FormItem>

                        <FormItem wrapperCol={{ span: 8, offset: 4 }} >
                            <Button type="primary" htmlType="submit"> 保存 </Button>
                        </FormItem>
                    </Form>
                </Card>
                <Modal
                    title="选择要添加的商品"
                    width="50%"
                    style={{fontSize:"14px"}}
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Table rowSelection={rowSelection} columns={columns} dataSource={data}
                           pagination={{defaultPageSize:8}}
                    />
                </Modal>
            </Baselist>

        )
    }
};

export default Form.create()(AddThematic);